<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript" src="js/uploadImg.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        body {
            margin: 0;
            padding: 30px;
        }

        #imagePreview {
            width: 160px;
            height: 120px;
            border: 1px #999 solid;
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale
            );
        }
    </style>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>个人信息</legend>
</fieldset>

<form id="uploadForm" class="layui-form" action="updateUserMassage" enctype="multipart/form-data" method="post">
    <input type="hidden" name="id" th:value="${session.user.id}">
    <input type="hidden" name="roleid" th:value="${session.user.roleid}">
    <input type="hidden" name="healthStatus" th:value="${session.user.healthStatus}">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="name" th:value="${session.user.name}" lay-verify="nameV" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" th:value="${session.user.password}" lay-verify="pass"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <input type="hidden" name="pic" th:value="${session.user.pic}"/>

    <div class="layui-form-item">
        <label class="layui-form-label">头像</label>
        <div class="layui-input-block">
            <div id="imagePreview" class="layui-inline" style="vertical-align: top">
                <img id="imgid" th:src="'/images/'+${session.user.pic}" style="width: 100%;height: 100%;"/>
            </div>
            <div class="layui-inline" style="vertical-align: top">
                <input id="imageInput" onchange="loadImageFile();" name="uploadpic" type="file"
                       class="layui-btn layui-btn-danger"/>
                <div id="picid" style="color: red;">请上传图片</div>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="男" title="男"
                   th:checked="${session.user.sex=='男'||session.user.sex!='女'}?'checked':'false'">
            <input type="radio" name="sex" value="女" title="女"
                   th:checked="${session.user.sex} eq '女'?'checked':'false'">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">电话号码</label>
            <div class="layui-input-inline">
                <input type="tel" name="tel" th:value="${session.user.tel}" lay-verify="required|phone"
                       autocomplete="off" class="layui-input demo-phone">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-inline">
                <input type="text" name="email" th:value="${session.user.email}" lay-verify="email" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">身份证号</label>
        <div class="layui-input-inline">
            <input type="text" name="idcard" th:value="${session.user.idcard}" lay-verify="required|idcard"
                   placeholder="请输入身份证号" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">地址</label>
        <div class="layui-input-block">
            <textarea name="detailedAddress" lay-verify="required|detailedAddress"
                      placeholder="请输入详细地址,格式xx省xx市xx县/区...." th:text="${session.user.detailedAddress}"
                      class="layui-textarea"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">保存修改</button>
            <button type="reset" lay-filter="resetF" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script>
    layui.use(['form', 'util', 'laydate'], function () {
        var form = layui.form;
        var layer = layui.layer;
        var util = layui.util;
        var laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#date',
            type: 'datetime'
        });
        //自定义验证规则
        form.verify({
            nameV: function (value) {
                if (value.length < 2 || value.length > 6) {
                    return '姓名长度2-6位';
                }
            },
            idcard: [
                /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
                , '身份证号错误'
            ],
            pass: [
                /^[\S]{6,12}$/
                , '密码必须6到12位，且不能出现空格'
            ],
            detailedAddress: [
                /^[\u4e00-\u9fa5]{2,}省[\u4e00-\u9fa5]{2,}市[\u4e00-\u9fa5]{1,}[县区][\u4e00-\u9fa5_-a-zA-Z0-9]{1,}$/
                , '地址格式xx省xx市xx县/区....'
            ]
        });

        // 提交事件
        form.on('submit(demo1)', function (data) {
            //因为有图片或者文件，所以要先创建form表单对象，通过form表单对象存储数据发送到后台
            let formData = new FormData($("#uploadForm")[0]);
            $.ajax({
                url: "/updateUserMassage",
                data: formData,
                type: "post",
                contentType: false,
                processData: false,
                success: function (msg) {
                    if (msg == 'SUCCESS') {
                        layer.alert("信息修改成功,请重新登录", {icon: 1});
                        setTimeout(function () {
                            window.open("loginOut", "_top");
                        }, 3000)
                    } else {
                        layer.alert("信息修改失败", {icon: 2});
                    }
                }
            });
            return false;  //阻止表单跳转
        });

    });
</script>
</body>
</html>